<template>
  <view class="" style="margin-bottom: 30upx;">
    <view class="progress_box" @click="onChange">
      <canvas class="progress_bg" canvas-id="cpbg"></canvas>
      <canvas class="progress_bar" canvas-id="cpbar"></canvas>
      <view class="progress_txt">
        <view class="progress_info" :style="{ Color: textColor }" v-if="isPercentage">{{ progress_txt }}</view>
        <view class="progress_info" v-else>{{ val }}%</view>
        <!-- <text>正确率</text> -->
      </view>
    </view>
    <slot name="name"></slot>
  </view>
</template>

<script>
  /*
    progress_txt 实际数量
    total：总数  ///根据实际情况自己添加的
    startColor、endColor：颜色渐变的时候传入开始颜色和结束颜色
    isPercentage     //如果需要显示百分比  传false
    */
  export default {

    data() {
      return {
        val: 0,
        num: 0,
        totals: 0
      };
    },
    props: {
      progress_txt: {
        type: Number,
        default: 10
      },
      total: {
        type: Number,
        default: 100
      },
      isPercentage: {
        type: Boolean,
        default: true
      },
      startColor: {
        type: String,
        default: '#FFA68C'
      },
      endColor: {
        type: String,
        default: '#FF3B1D'
      },
      textColor: {
        type: String,
        default: '#333333'
      }
    },
    created() {

    },
    updated() {
      this.getData();
    },
    watch: {
      progress_txt: {
        handler(val) {
          this.num = val
          this.drawProgressbg();
          this.getData()
        },
        immediate: true
      },
      total(newValue, oldValue) {
        this.totals = newValue
      }
    },
    methods: {
      onChange() {
        this.$emit('onChange')
      },
      getData() {
        if (this.totals) {
          this.val = (this.num / this.totals) * 100;
          this.drawCircle(this.val);
        } else {
          this.drawCircle(this.num); ////参数为1-100
        }
      },
      drawProgressbg: function() {
        var that = this;
        // 自定义组件实例 this ，表示在这个自定义组件下查找拥有 canvas-id 的 <canvas/>
        var ctx = uni.createCanvasContext('cpbg', this);
        let width = uni.upx2px(8);
        ctx.setLineWidth(width);
        ctx.setStrokeStyle('#E9E9E9'); // 设置圆环的颜色
        ctx.setLineCap('round'); // 设置圆环端点的形状
        ctx.beginPath(); //开始一个新的路径
        let cWidth = uni.upx2px(75);
        let cHeight = uni.upx2px(71);
        ctx.arc(cWidth, cWidth, cHeight, 0.75 * Math.PI, 0.25 * Math.PI, false);
        //设置一个原点(110,110)，半径为100的圆的路径到当前路径
        ctx.stroke(); //对当前路径进行描边
        ctx.draw();
      },
      drawCircle: function(step) {
        console.log(step, 123123);
        var that = this;
        var ctx = uni.createCanvasContext('cpbar', this);
        // 进度条的渐变(中心x坐标-半径-边宽，中心Y坐标，中心x坐标+半径+边宽，中心Y坐标)
        var gradient = ctx.createLinearGradient(28, 55, 192, 55);
        gradient.addColorStop('0', that.startColor);
        gradient.addColorStop('1.0', that.endColor);
        let width = uni.upx2px(8);
        ctx.setLineWidth(width);
        ctx.setStrokeStyle(gradient);
        ctx.setLineCap('round');
        ctx.beginPath();
        // 参数step 为绘制的百分比
        step = 0.015 * step + 0.75;
        if (step >= 2) {
          step = step % 2;
        }
        let cWidth = uni.upx2px(75);
        let cHeight = uni.upx2px(71);
        ctx.arc(cWidth, cWidth, cHeight, 0.75 * Math.PI, step * Math.PI, false);
        ctx.stroke();
        ctx.draw();
      }
    }
  };
</script>

<style>
  .progress_box {
    position: relative;
    width: 150upx;
    height: 150upx;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .progress-dubge {
    position: absolute;
    top: 0;
    right: -16upx;
    width: 64upx;
    height: 36upx;
    background-size: 100%;
    background-repeat: no-repeat;
    text-align: center;
    font-size: 20upx;
    color: #FFFFFF;
    line-height: 30upx;
    z-index: 82;
  }

  .progress_bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 150upx;
    height: 120upx;
    z-index: 1;
    /* border: 4upx solid #e9e9e9; */
    border-radius: 50%;
  }

  .progress_bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 150upx;
    height: 150upx;
    background-color: rgba(255, 255, 255, 0);
    z-index: 2;
  }

  .progress_txt {
    position: absolute;
    font-size: 28upx;
    color: #999999;
  }

  .progress_info {
    font-size: 40upx;
    text-align: center;
  }

  .progress_info image {
    width: 104upx;
    height: 104upx;
    border-radius: 50%;
  }

  .progress_dot {
    width: 16upx;
    height: 16upx;
    border-radius: 50%;
    background-color: #1f995b;
  }
</style>
